<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
    

    

    



    <meta charset="utf-8">
    
    
    
    <title>openlayers 学习笔记 | 奔跑的蜗牛 | 虚心若愚</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="gis,openlayers">
    <meta name="description" content="OpenLayers 学习笔记1.定制logonew ol.Map(&amp;#123;    controls: ol.control.defaults(&amp;#123;        attributionOptions: (&amp;#123;          collapsible: false        &amp;#125;)      &amp;#125;),      // logo: false,     //">
<meta name="keywords" content="gis,openlayers">
<meta property="og:type" content="article">
<meta property="og:title" content="openlayers 学习笔记">
<meta property="og:url" content="http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/index.html">
<meta property="og:site_name" content="奔跑的蜗牛">
<meta property="og:description" content="OpenLayers 学习笔记1.定制logonew ol.Map(&amp;#123;    controls: ol.control.defaults(&amp;#123;        attributionOptions: (&amp;#123;          collapsible: false        &amp;#125;)      &amp;#125;),      // logo: false,     //">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://note.youdao.com/yws/public/resource/7f48e5f9772b3bac7b2235e8e86531e9/xmlnote/93983142A12648308CB4BA8D7775504B/583">
<meta property="og:image" content="https://note.youdao.com/yws/public/resource/7f48e5f9772b3bac7b2235e8e86531e9/xmlnote/1489CA7227944A5498CE73634CFD25B5/588">
<meta property="og:updated_time" content="2020-03-18T05:34:57.870Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="openlayers 学习笔记">
<meta name="twitter:description" content="OpenLayers 学习笔记1.定制logonew ol.Map(&amp;#123;    controls: ol.control.defaults(&amp;#123;        attributionOptions: (&amp;#123;          collapsible: false        &amp;#125;)      &amp;#125;),      // logo: false,     //">
<meta name="twitter:image" content="https://note.youdao.com/yws/public/resource/7f48e5f9772b3bac7b2235e8e86531e9/xmlnote/93983142A12648308CB4BA8D7775504B/583">
    
        <link rel="alternative" href="/atom.xml" title="奔跑的蜗牛" type="application/atom+xml">
    
    <link rel="shortcut icon" href="/blog/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@1.5.2/css/style.css">
    <script>window.lazyScripts=[]</script>
</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/blog/img/timg.jpg)">
      <div class="brand">
        <a href="/blog/" class="avatar waves-effect waves-circle waves-light">
          <img src="/blog/img/user2.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">windy</h5>
          <a href="mailto:windynature@163.com" title="windynature@163.com" class="mail">windynature@163.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/blog/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                归档
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/categories"  >
                <i class="icon icon-lg icon-th-list"></i>
                分类
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/WindyNature" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://git.oschina.net/windynature" target="_blank" >
                <i class="icon icon-lg icon-mayun"></i>
                码云
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">openlayers 学习笔记</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">openlayers 学习笔记</h1>
        <h5 class="subtitle">
            
                <time datetime="2020-03-18T05:32:47.053Z" itemprop="datePublished" class="page-time">
  2020-03-18
</time>


	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/blog/categories/openlayers/">openlayers</a></li></ul>

            
        </h5>
    </div>

    

</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#OpenLayers-学习笔记"><span class="post-toc-text">OpenLayers 学习笔记</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#1-定制logo"><span class="post-toc-text">1.定制logo</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#2-地图联动"><span class="post-toc-text">2.地图联动</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#3-交换地图"><span class="post-toc-text">3.交换地图</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#4-View"><span class="post-toc-text">4. View</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#1-地图的导航"><span class="post-toc-text">1. 地图的导航</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#2-坐标转换"><span class="post-toc-text">2. 坐标转换</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#3-Openlayers-使用的坐标系"><span class="post-toc-text">3. Openlayers 使用的坐标系</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#4-设置投影"><span class="post-toc-text">4. 设置投影</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#5-view的使用"><span class="post-toc-text">5. view的使用</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#6-自适配区域"><span class="post-toc-text">6. 自适配区域</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#5-Source和Layer"><span class="post-toc-text">5. Source和Layer</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#1-Source"><span class="post-toc-text">1. Source</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#2-Layer"><span class="post-toc-text">2. Layer</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#6-Openlayers-离线文档慢的原因"><span class="post-toc-text">6. Openlayers 离线文档慢的原因</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#7-常用知识点"><span class="post-toc-text">7. 常用知识点</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#8-瓦片地图行列号换算原理"><span class="post-toc-text">8. 瓦片地图行列号换算原理</span></a></li></ol></li></ol>
        </nav>
    </aside>
    
<article id="post-openlayers/openlayers学习笔记"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">openlayers 学习笔记</h1>
        <div class="post-meta">
            <time class="post-time" title="2020年03月18日 13:32" datetime="2020-03-18T05:32:47.053Z"  itemprop="datePublished">2020-03-18</time>

            
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/blog/categories/openlayers/">openlayers</a></li></ul>



            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


            

        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h1 id="OpenLayers-学习笔记"><a href="#OpenLayers-学习笔记" class="headerlink" title="OpenLayers 学习笔记"></a>OpenLayers 学习笔记</h1><h2 id="1-定制logo"><a href="#1-定制logo" class="headerlink" title="1.定制logo"></a>1.定制logo</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> ol.Map(&#123;</span><br><span class="line">    controls: ol.control.defaults(&#123;</span><br><span class="line">        attributionOptions: (&#123;</span><br><span class="line">          collapsible: <span class="literal">false</span></span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="comment">// logo: false,     // 不显示logo</span></span><br><span class="line">      <span class="comment">// logo: 'face_monkey.png',     // 用一个图片 face_monkey.png 作为logo</span></span><br><span class="line">      logo: &#123;</span><br><span class="line">          src: <span class="string">'../img/face_monkey.png'</span>, </span><br><span class="line">          href: <span class="string">'http://www.openstreetmap.org/'</span></span><br><span class="line">          &#125;,<span class="comment">// 点击能跳转到对应页面</span></span><br><span class="line">      layers: [</span><br><span class="line">          <span class="keyword">new</span> ol.layer.Tile(&#123;<span class="attr">source</span>: <span class="keyword">new</span> ol.source.OSM()&#125;)</span><br><span class="line">      ],</span><br><span class="line">      view: <span class="keyword">new</span> ol.View(&#123;</span><br><span class="line">          center: [<span class="number">0</span>, <span class="number">0</span>],</span><br><span class="line">          zoom: <span class="number">2</span></span><br><span class="line">      &#125;),</span><br><span class="line">      target: <span class="string">'map'</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="2-地图联动"><a href="#2-地图联动" class="headerlink" title="2.地图联动"></a>2.地图联动</h2><p>两个<code>ol.Map</code>使用同一个<code>ol.view</code></p>
<h2 id="3-交换地图"><a href="#3-交换地图" class="headerlink" title="3.交换地图"></a>3.交换地图</h2><p>实质是交换连个地图的容器。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">swapMap</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 改变两个地图的容器</span></span><br><span class="line">    map1.setTarget(<span class="string">'map2'</span>);</span><br><span class="line">    map2.setTarget(<span class="string">'map1'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="4-View"><a href="#4-View" class="headerlink" title="4. View"></a>4. View</h2><h3 id="1-地图的导航"><a href="#1-地图的导航" class="headerlink" title="1. 地图的导航"></a>1. 地图的导航</h3><p>移动：主要是对地图中心的设置<br>缩放：主要是对<code>ol.View</code>的<code>zoom</code>进行设置</p>
<h3 id="2-坐标转换"><a href="#2-坐标转换" class="headerlink" title="2. 坐标转换"></a>2. 坐标转换</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">view: <span class="keyword">new</span> ol.View(&#123;</span><br><span class="line">              <span class="comment">// 设置成都为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，</span></span><br><span class="line">              <span class="comment">//转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标</span></span><br><span class="line">              center: ol.proj.transform([<span class="number">104.06</span>, <span class="number">30.67</span>], <span class="string">'EPSG:4326'</span>, <span class="string">'EPSG:3857'</span>),</span><br><span class="line">              zoom: <span class="number">10</span></span><br><span class="line">          &#125;),</span><br></pre></td></tr></table></figure>

<h3 id="3-Openlayers-使用的坐标系"><a href="#3-Openlayers-使用的坐标系" class="headerlink" title="3. Openlayers 使用的坐标系"></a>3. Openlayers 使用的坐标系</h3><p>目前OpenLayers 3支持两种投影，一个是EPSG:4326，等同于WGS84坐标系，参见详情。另一个是EPSG:3857，等同于900913，由Mercator投影而来，经常用于web地图，参见详情。一个是全球通用的，一个是web地图专用的，自然OpenLayers 3支持它们。在使用过程中，需要注意OpenLayers 3默认使用的是EPSG:3857。这也是为什么前面的代码里需要进行坐标转换的原因。</p>
<h3 id="4-设置投影"><a href="#4-设置投影" class="headerlink" title="4. 设置投影"></a>4. 设置投影</h3><p>在<code>ol.View</code>中设置</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> ol.View(&#123;</span><br><span class="line">            <span class="comment">// 设置成都为地图中心</span></span><br><span class="line">            center: [<span class="number">104.06</span>, <span class="number">30.67</span>],</span><br><span class="line">            <span class="comment">// 指定投影使用EPSG:4326</span></span><br><span class="line">            projection: <span class="string">'EPSG:4326'</span>,</span><br><span class="line">            zoom: <span class="number">10</span></span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure>

<h3 id="5-view的使用"><a href="#5-view的使用" class="headerlink" title="5. view的使用"></a>5. view的使用</h3><p><strong>设置边界</strong><br>extent: [102, 29, 104, 31],这行代码就实现了功能。extent参数类型为[minX, minY, maxX, maxY]的ol.Extent，很容易记住。</p>
<p><strong>限制缩放级别</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">view: <span class="keyword">new</span> ol.View(&#123;</span><br><span class="line">            <span class="comment">// 设置成都为地图中心</span></span><br><span class="line">            center: [<span class="number">104.06</span>, <span class="number">30.67</span>],</span><br><span class="line">            projection: <span class="string">'EPSG:4326'</span>,</span><br><span class="line">            zoom: <span class="number">10</span>,</span><br><span class="line">            <span class="comment">// 限制地图缩放最大级别为14，最小级别为10</span></span><br><span class="line">            minZoom: <span class="number">10</span>,</span><br><span class="line">            maxZoom: <span class="number">14</span></span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure>

<h3 id="6-自适配区域"><a href="#6-自适配区域" class="headerlink" title="6. 自适配区域"></a>6. 自适配区域</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fitToChengdu</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">// 让地图最大化完全地显示区域[104, 30.6, 104.12, 30.74]</span></span><br><span class="line">        map.getView().fit([<span class="number">104</span>, <span class="number">30.6</span>, <span class="number">104.12</span>, <span class="number">30.74</span>], map.getSize());</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h2 id="5-Source和Layer"><a href="#5-Source和Layer" class="headerlink" title="5. Source和Layer"></a>5. Source和Layer</h2><h3 id="1-Source"><a href="#1-Source" class="headerlink" title="1. Source"></a>1. Source</h3><p>首先需要明白的一点是，Source和Layer是一对一的关系，有一个Source，必然需要一个Layer，然后把这个Layer添加到Map上，就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source，但归纳起来共三种：<code>ol.source.Tile</code>，<code>ol.source.Image</code>和<code>ol.source.Vector</code>。</p>
<ul>
<li><code>ol.source.Tile</code>对应的是瓦片数据源，现在网页地图服务中，绝大多数都是使用的瓦片地图，而OpenLayers 3作为一个WebGIS引擎，理所当然应该支持瓦片。</li>
<li><code>ol.source.Image</code>对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图。</li>
<li><code>ol.source.Vector</code>对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)，就囊括到这里面了。这样看来，只要这两种Source就可以搞定80%的需求了。</li>
</ul>
<p>从复杂度来分析，ol.source.Image和ol.source.Vector都不复杂，其数据格式和来源方式都简单。而<code>ol.source.Tile</code>则不一样，由于一些历史问题，多个服务提供商，多种标准等诸多原因，导致要支持世界上大多数的瓦片数据源，就需要针对这些差异提供不同的Tile数据源支持。在更进一步了解之前，我们先来看一下OpenLayers 3现在支持的Source具体有哪些： </p>
<p><img src="https://note.youdao.com/yws/public/resource/7f48e5f9772b3bac7b2235e8e86531e9/xmlnote/93983142A12648308CB4BA8D7775504B/583" alt="ol.source.Source结构"></p>
<p>我们先了解最为复杂的<code>ol.source.Tile</code>，其叶子节点类有很多，大致可以分为几类：</p>
<ul>
<li>在线服务的Source，包括<code>ol.source.BingMaps</code>(使用的是微软提供的Bing在线地图数据)，<code>ol.source.MapQuest</code>(使用的是MapQuest提供的在线地图数据)(注: 由于MapQuest开始收费，ol v3.17.0就移除了<code>ol.source.MapQuest</code>)，<code>ol.source.OSM</code>(使用的是Open Street Map提供的在线地图数据)，<code>ol.source.Stamen</code>(使用的是Stamen提供的在线地图数据)。没有自己的地图服务器的情况下，可直接使用它们，加载地图底图。</li>
<li>支持协议标准的Source，包括<code>ol.source.TileArcGISRest</code>，<code>ol.source.TileWMS</code>，<code>ol.source.WMTS</code>，<code>ol.source.UTFGrid</code>，<code>ol.source.TileJSON</code>。如果要使用它们，首先你得先学习对应的协议，之后必须找到支持这些协议的服务器来提供数据源，这些服务器可以是地图服务提供商提供的，也可以是自己搭建的服务器，关键是得支持这些协议。</li>
<li><code>ol.source.XYZ</code>，这个需要单独提一下，因为是可以直接使用的，而且现在很多地图服务（在线的，或者自己搭建的服务器）都支持xyz方式的请求。国内在线的地图服务，高德，天地图等，都可以通过这种方式加载，本地离线瓦片地图也可以，用途广泛，且简单易学，需要掌握。</li>
</ul>
<p><code>ol.source.Image</code>虽然有几种不同的子类，但大多比较简单，因为不牵涉到过多的协议和服务器提供商。而<code>ol.source.Vector</code>就更加的简单了，但有时候其唯一的子类<code>ol.source.Cluster</code><strong><code>在处理大量的Feature时，我们可能需要使用。</code></strong></p>
<h3 id="2-Layer"><a href="#2-Layer" class="headerlink" title="2. Layer"></a>2. Layer</h3><p>在大概了解了整个Source之后，紧接着该介绍它的搭档<code>Layer</code>了，同样的，我们还是先从OpenLayers 3现有的Layer类图大致了解一下：</p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://note.youdao.com/yws/public/resource/7f48e5f9772b3bac7b2235e8e86531e9/xmlnote/1489CA7227944A5498CE73634CFD25B5/588" alt title>
                </div>
                <div class="image-caption"></div>
            </figure>

<h2 id="6-Openlayers-离线文档慢的原因"><a href="#6-Openlayers-离线文档慢的原因" class="headerlink" title="6. Openlayers 离线文档慢的原因"></a>6. Openlayers 离线文档慢的原因</h2><p>由于离线文档和示例中的html使用到了一个样式文件，服务器在国外，无法访问，注释即可。</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@import</span> url(<span class="attribute">https:</span>//fonts.googleapis.com/css?family=Quattrocento+<span class="attribute">Sans:</span><span class="number">400</span>,<span class="number">400</span>italic,<span class="number">700</span>);</span><br></pre></td></tr></table></figure>

<h2 id="7-常用知识点"><a href="#7-常用知识点" class="headerlink" title="7. 常用知识点"></a>7. 常用知识点</h2><p><code>Scale：</code>表示的是比例尺，即地图上的一厘米代表着实际上的多少厘米。例如地图上1厘米代表实地距离500千米，可写成：1 ∶ 50,000,000或写成：1/50,000,000。</p>
<p><code>Resolution：</code>表示的是分辨率。Resolution 的实际含义代表当前地图范围内，<code>1像素代表多少地图单位</code>（X地图单位/像素），地图单位取决于数据本身的空间参考。可见Resolution跟 dpi有关系（dpi代表每英寸的像素数，dots per inch），跟地图的单位也有关系。</p>
<ul>
<li>英寸转厘米的国际参数是：2.5399998</li>
<li>AGS的参数是：2.54000508001016</li>
</ul>
<p>当系统是经纬度时：resolution可以直接使用切图文档中的resolution.<br>当系统是平面系统时：resolution = scale * inch2cetimeter / dpi (scale是地图比例尺，inch2centimeter为英寸转厘米的参数，dpi为1英寸所包含的像素。)</p>
<p><code>EPSG:</code>（The European Petroleum Survey Group, <a href="http://www.epsg.org/" target="_blank" rel="noopener">http://www.epsg.org/</a> ）维护着空间参照对象的数据集，OGC标准中空间参照系统的SRID（Spatial Reference System Identifier）与EPSG的空间参照系统ID相一致。</p>
<h2 id="8-瓦片地图行列号换算原理"><a href="#8-瓦片地图行列号换算原理" class="headerlink" title="8. 瓦片地图行列号换算原理"></a>8. 瓦片地图行列号换算原理</h2><p>影像图切成离散型图后文件的组织形式其实是按照瓦片的级别、行、列号来组织的。并且，标准的WMS请求中也涉及到行列号的换算，WMS请求中有一个Bbox的参数，而这个参数也与行列号的换算有关系。而标准的WMTS请求中，TILEMATRIX、TILEROW、TILECOL这三个参数代表的就是瓦片的级别、行、列号。</p>
<p><strong>由此可见，不管是针对哪种离线或在线的地图的瓦片请求中，得到瓦片的level、col、row是请求能够实现的核心。</strong></p>

        </div>

        <blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2020-03-18T05:34:57.870Z" itemprop="dateUpdated">2020年3月18日 13:34</time>
</span><br>


        这里写留言或版权声明：<a href="/blog/2020/03/18/openlayers/openlayers学习笔记/" target="_blank" rel="external">http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/</a>
    </div>
    <footer>
        <a href="http://windynature.oschina.io">
            <img src="/blog/img/user2.jpg" alt="windy">
            windy
        </a>
    </footer>
</blockquote>

        


        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/gis/">gis</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/openlayers/">openlayers</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/&title=《openlayers 学习笔记》 — 奔跑的蜗牛&pic=http://windynature.oschina.io/img/user2.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/&title=《openlayers 学习笔记》 — 奔跑的蜗牛&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《openlayers 学习笔记》 — 奔跑的蜗牛&url=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/&via=http://windynature.oschina.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/blog/2020/03/18/openlayers/openlayers加载ArcGIS自定义坐标系切片服务/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">openlayers加载ArcGIS自定坐标切片服务</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/blog/2020/03/18/gis基本原理/瓦片计算工具类/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">切片请求工具类</h4>
      </a>
    </div>
  
</nav>



    

<div class="comments" id="comments">
    <div class="ds-thread" data-thread-key="openlayers/openlayers学习笔记" data-title="openlayers 学习笔记" data-url="http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/"></div>
</div>
<script>
lazyScripts.push('//cdn.bootcss.com/marked/0.3.6/marked.min.js');

var duoshuoQuery = {short_name:'ysblog', theme: 'none'};
lazyScripts.push('//unpkg.com/hexo-theme-material-indigo@1.5.2/js/embed.min.js');


</script>










</article>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            <span>博客内容遵循 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名 - 非商业性 - 相同方式共享 4.0协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p>
            <span>Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a></span>
            <span>奔跑的蜗牛 &copy; 2015 - 2020</span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/&title=《openlayers 学习笔记》 — 奔跑的蜗牛&pic=http://windynature.oschina.io/img/user2.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/&title=《openlayers 学习笔记》 — 奔跑的蜗牛&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《openlayers 学习笔记》 — 奔跑的蜗牛&url=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/&via=http://windynature.oschina.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://windynature.oschina.io/2020/03/18/openlayers/openlayers学习笔记/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/blog/', SHARE: true, REWARD: false };



</script>

<script src="//unpkg.com/hexo-theme-material-indigo@1.5.2/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@1.5.2/js/search.min.js" async></script>






<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
